<template>
	<div class="tab-title-page goods_list">
		<el-tabs class="flex-1 nav_tabs" v-model="activeName" @tab-click="handleClick">
			<el-tab-pane :label="`已上架商品(${count.status_put})`" name="1"></el-tab-pane>
			<el-tab-pane :label="`已下架商品(${count.status_off})`" name="2"></el-tab-pane>
		</el-tabs>
		<el-divider class="middle_divider"></el-divider>
		<div class="child_page">
			<div class="common_form_search">
				<el-form ref="searchForm" :inline="true" :model="searchForm">
					<el-form-item label="商品名称">
						<el-input v-model="searchForm.goods_name" placeholder="请输入商品名称" clearable></el-input>
					</el-form-item>
					<el-form-item label="供应商">
						<el-input v-model="searchForm.shop_name" placeholder="请输入供应商" clearable></el-input>
					</el-form-item>
					<el-form-item label="商品品类">
						<el-select v-model="searchForm.cate_id" placeholder="请选择商品品类" clearable>
							<el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="租赁方式">
						<el-select v-model="searchForm.rent_type" placeholder="请选择" clearable>
							<el-option label="随租随还" :value="3"></el-option>
							<el-option label="固定租期" :value="1"></el-option>
							<el-option label="租完即送" :value="2"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="创建时间">
						<my-date-picker ref="myDatePicker"></my-date-picker>
					</el-form-item>
					<el-form-item>
						<el-button size="small" type="primary" @click="search()">查询</el-button>
						<el-button size="small" @click="reset()">重置</el-button>
					</el-form-item>
				</el-form>
			</div>
			<el-divider></el-divider>
			<div style="padding:0 30px">
				<div class="flex align-center table-top-btns">
					<h5 class="flex align-center">
						<svg-icon style="margin-right:15px" icon-class="list" :size="15" />数据列表
					</h5>
				</div>
				<el-table :data="tableData" border v-show="tableData.length > -1">
					<el-table-column align="center" label="商品信息" width="300">
						<template slot-scope="scope">
							<div class="flex align-center goods_info">
								<el-image style="width: 60px; height: 60px"
									:src="scope.row.imgurl?$globalObj.imgBaseUrl+scope.row.imgurl:''">
									<div slot="error" class="image-slot">
										<i class="el-icon-picture-outline"></i>
									</div>
								</el-image>
								<div class="flex-1 text-left info">
									<p class="activity">{{scope.row.id}}
										<span class="inline-block v-middle" v-for="(item, index) in scope.row.activity"
											:key="index">
											<el-popover placement="top-start" width="160" trigger="hover"
												:content="item.activity_title">
												<img v-if="item.activity_img" slot="reference" class="w-100 h-100"
													:src="$globalObj.imgApiUrl+item.activity_img"
													:alt="item.activity_title">
											</el-popover>
											<!-- <img
                    v-if="item.activity_img"
                    class="w-100 h-100"
                    :src="$globalObj.imgBaseUrl+item.activity_img"
                    :alt="item.activity_title"
                  > -->
										</span>
									</p>
									<p>{{scope.row.title}}</p>
								</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column align="center" width="100" prop="pact_type" label="租赁方式" />
					<el-table-column align="center" width="100" prop="rent_type" label="租期类型" />
					<el-table-column align="center" label="库存" prop="stock" />
					<el-table-column align="center" prop="cate_name" label="品类" />
					<el-table-column align="center" prop="create_time" label="创建时间" width="100" />
					<el-table-column align="center" prop="shopname" label="供应商" />
					<el-table-column align="center" prop="status_name" label="状态" />
					<el-table-column v-if="activeName==2" align="center" prop="check_reason" label="原因" />
					<el-table-column fixed="right" align="center" label="操作" width="340px">
						<template slot-scope="scope">
							<el-dropdown v-if="$hasMethod('#edit')" style="margin-right:10px"
								@command="command=>handleCommand(command,scope.row.id)">
								<el-button type="primary" size="mini">编辑<i
										class="el-icon-arrow-down el-icon--right"></i></el-button>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item command="1">商品信息</el-dropdown-item>
									<el-dropdown-item command="2">套餐信息</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
							<el-button v-if="$hasMethod('#enable')" type="warning" size="mini"
								@click="changeStatus(scope.row.id, scope.row.status)">{{scope.row.status==1?'下架':'上架'}}
							</el-button>
							<el-button v-if="$hasMethod('#set')&&activeName==1" type="success" size="mini"
								@click="setActivity(scope.row.id)">设置活动</el-button>
							<el-dropdown v-if="$hasMethod('#view')||activeName==1"
								@command="command=>handleMore(command,scope.row.id)">
								<span class="el-dropdown-link blue-font" style="margin-left:10px">
									更多操作<i class="el-icon-arrow-down el-icon--right"></i>
								</span>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item command="1">查看</el-dropdown-item>
									<el-dropdown-item v-if="activeName==1" command="2">分享链接</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</template>
					</el-table-column>
				</el-table>
				<custom-page ref="customPage" :total="total" @getList="getList"></custom-page>
			</div>
		</div>
		<off-dialog ref="offDialog" @getList="getList"></off-dialog>
		<set-dialog ref="setDialog" @getList="getList"></set-dialog>
		<share-dialog ref="shareDialog"></share-dialog>
	</div>
</template>
<script>
	import myDatePicker from "@/components/myDatePicker";
	import offDialog from "./components/offDialog";
	import shareDialog from "./components/shareDialog";
	import setDialog from "./components/setDialog";
	import customPage from "@/components/customPage";
	import {
		goodsGrounding,
		getGoodsAll,
		getCategory
	} from "@/api/audit";
	export default {
		components: {
			myDatePicker,
			offDialog,
			shareDialog,
			setDialog,
			customPage
		},
		data() {
			return {
				searchForm: {
					goods_name: "",
					shop_name: "",
					cate_id: "",
					rent_type: "",
					create_time: ""
				},
				activeName: '1',
				count: {
					status_put: 0,
					status_off: 0
				},
				total: 0,
				tableData: [],
				categoryList: []
			}
		},
		created() {
			// let person={
			// 	name:'xiaozhang'
			// }
			// let proxy=new Proxy(person,{
			// 	get:function(target,porpKey,receiver){
			// 		return Reflect.get(target,porpKey,receiver)
			// 	}
			// })
			// console.log(proxy.name);
			// console.log(proxy);
			// function createArray(...elements){
			// 	let handler={
			// 		get(target,propKey,receiver){
			// 			let index=Number(propKey);
			// 			if(index<0){
			// 				propKey=String(target.length+index)
			// 			}
			// 			return Reflect.get(target,propKey,receiver)
			// 		}
			// 	}
			// 	let target=[]
			// 	target.push(...elements)
			// 	return new Proxy(target,handler)
			// }
			// let arr = createArray('a','b','c')
			// console.log(arr[-1]);
			
		},
		methods: {
			// 设置活动
			setActivity(id) {
				this.$refs.setDialog.goodsId = id;
				this.$refs.setDialog.dialogVisible = true;
			},
			// 上架/下架
			changeStatus(id, status) {
				if (status == 1) {
					// 下架
					this.$refs.offDialog.goodsId = id;
					this.$refs.offDialog.dialogVisible = true;
				} else {
					// 上架
					this.$confirm("您确定要上架商品吗？", "上架", {
						confirmButtonText: '确定',
						cancelButtonText: '取消'
					}).then(() => {
						goodsGrounding(id).then(res => {
							this.getList(true);
						})
					}).catch(() => {});
				}
			},
			handleMore(command, goodsId) {
				if (command == 1) {
					// 查看
					this.$router.push({
						name: 'goodsView',
						params: {
							goodsId
						}
					});
				} else {
					// 分享链接
					this.$refs.shareDialog.goodsId = goodsId;
					this.$refs.shareDialog.dialogVisible = true;
				}
			},
			handleCommand(command, goodsId) {
				if (command == 1) {
					this.$router.push({
						name: 'goodsBaseEdit',
						params: {
							editId: goodsId
						}
					})
				} else {
					this.$router.push({
						name: 'goodsMealInfo',
						params: {
							goodsId
						}
					});
				}
			},
			// 查询
			search() {
				const pickerVal = this.$refs.myDatePicker.getVal();
				if (pickerVal !== 'error') {
					this.searchForm.create_time = pickerVal;
					this.$refs.customPage.page = 1;
					this.getList();
				}
			},
			// 重置
			reset() {
				if (this.$refs.myDatePicker) {
					this.$refs.myDatePicker.reset();
				}
				this.searchForm = {
					goods_name: "",
					shop_name: "",
					cate_id: "",
					rent_type: "",
					create_time: ""
				};
				this.getList();
			},
			handleClick(tab) {
				this.activeName = tab.name;
				this.$refs.customPage.page = 1;
				this.getList();
			},
			// 获取数据
			getList(flag) {
				// flag为true, 则不刷新表格
				const {
					page,
					pageSize
				} = this.$refs.customPage;
				if (!flag) {
					this.tableData = [];
				}
				getGoodsAll({
					page,
					pageSize,
					...this.searchForm,
					goods_status: this.activeName
				}).then(res => {
					this.tableData = res.data || [];
					this.total = res.total;
					for (let key in this.count) {
						this.count[key] = res.count[key];
					}
				})
			},
			getSelectList() {
				getCategory().then(res => {
					this.categoryList = res || [];
				})
			}
		},
		mounted() {
			this.getSelectList();
			this.getList();
		},
		beforeRouteEnter(to, from, next) {
			next(vm => {
				vm.getList(true);
			})
		}
	}
</script>
<style lang="scss" scoped>
	.common_form_search {
		padding: 15px 30px 0;
	}

	.child_page {
		padding-bottom: 15px;
	}

	.goods_info {
		.info {
			margin-left: 10px;

			p {
				color: #666666;
			}

			p:first-child {
				color: #999999;
			}
		}
	}

	.activity {
		line-height: 24px;

		span {
			width: 20px;
			height: 20px;
			margin-left: 10px;
		}
	}
</style>
